<template>
    <div class="bg-section-sm md:bg-section-lg bg-cover bg-left text-center py-16">
        <h2 class="text-38px font-bold text-white mb-12 drop-shadow shadow-purple-700 px-4">各大品牌 DDoS <br class="block md:hidden">專案全站 95 折起！</h2>
        <a class="bg-orange hover:bg-orangeDark text-white text-l font-bold rounded py-4 px-14 inline-flex items-center justify-center"
            href="https://tw.cocloud.com/zh-tw/contact_us/">專案諮詢</a>
    </div>
    <div class="py-20 md:py-28 text-left bg-white">
        <div class="container m-auto mb-3 max-w-screen-lg px-4">
            <h2 class="text-38px text-black mb-8 font-bold px-6 text-center">七大合作品牌<br class="block md:hidden"> DDoS 防護專案</h2>
            <div class="flex flex-wrap justify-center">
                <div v-for="item in plans" class="relative px-4 py-6">
                    <div :class="item.title === '華為雲' || item.title === '騰訊雲' ? 'product-box-lg':'product-box'" class="p-6 md:p-10 bg-white rounded shadow-xl h-full relative overflow-hidden text-black flex flex-col justify-between">
                        <div>
                            <div class="color-deco absolute top-0 left-0 w-full h-1.5">
                                <div class="bg-aws w-full h-full" v-if="item.title === '亞馬遜雲'"></div>
                                <div class="bg-gcp flex w-full h-full" v-if="item.title === 'GCP'">
                                    <span class="w-full h-full bg-gcp1"></span>
                                    <span class="w-full h-full bg-gcp2"></span>
                                    <span class="w-full h-full bg-gcp3"></span>
                                </div>
                                <div class="bg-azure w-full h-full" v-if="item.title === 'Azure'"></div>
                                <div class="bg-gradient-to-r from-cloudFlare1 to-cloudFlare2  w-full h-full" v-if="item.title === 'CLOUDFLARE'">
                                </div>
                                <div class="bg-huawei w-full h-full" v-if="item.title === '華為雲'"></div>
                                <div class="bg-gradient-to-r from-tencent1 to-tencent2  w-full h-full" v-if="item.title === '騰訊雲'"></div>
                            </div>
                            <h3 class="text-2xl font-bold text-black mb-2 flex items-center">
                                <img class="w-12 mr-2" :src="item.img" :alt="item.title">
                                {{ item.title }}
                            </h3>
                            <p class="text-gray mb-4" v-html="item.sub"></p>
                            <div v-for="feature in item.features" v-html="feature"></div>
                        </div>
                        <div class="text-center">
                            <div class="relative  px-1 text-center">
                                <small class="text-muted relative"> 
                                    原廠牌價
                                    {{ item.originPrice }}
                                    ＵＳＤ/月
                                    <span class="absolute w-full top-1/2 h-px bg-red left-0"></span>
                                </small>
                            </div>
                            <p class="text-orangeLight font-bold text-2xl">${{ item.price }}<span class="text-sm font-normal"> USD/月 起</span></p>
                            <div class="relative mb-2 px-1 text-center">
                                <small class="text-muted relative"> 
                                    台幣約
                                    {{ item.price.replace(',','')*32 }}
                                    TWD/月
                                </small>
                            </div>
                            <p v-if="item.discount" class="text-red font-bold text-2xl mb-2">
                                {{ item.discount }}折以下
                            </p>
                            <a class="bg-orange hover:bg-orangeDark text-white text-l font-bold rounded py-2 px-14 w-4/5 inline-flex items-center justify-center"
                                href="https://tw.cocloud.com/zh-tw/contact_us/">立即申請</a>
                        </div>
                    </div>
                </div>
            </div>

        </div>
        <div class="container m-auto max-w-screen-xl">
            <div class="hidden lg:flex">
                <div v-for="item in slides" class="w-full md:w-1/2 p-2 relative">
                    <div class="product-box-lg p-6 md:p-10 bg-white rounded shadow-xl h-full relative overflow-hidden text-black flex flex-col justify-between">
                        <div>
                            <div class="color-deco absolute top-0 w-full h-1.5 bg-alibaba top-0 left-0"></div>
                            <h3 class="text-2xl font-bold text-black mb-2 flex items-center">
                                <img class="w-12 mr-2" :src="item.img" :alt="item.title">
                                {{ item.title }}
                            </h3>
                            <p class="text-gray mb-4" v-html="item.sub"></p>
                            <div v-for="feature in item.features" v-html="feature"></div>
                        </div>
                        <div class="text-center">
                            <div class="relative inline-block px-1 text-center">
                                <small class="text-muted relative"> 
                                    原廠牌價
                                    {{ item.originPrice }}
                                    ＵＳＤ/月
                                    <span class="absolute w-full top-1/2 h-px bg-red left-0"></span>
                                </small>
                                
                            </div>
                            <p class="text-orangeLight font-bold text-2xl">${{ item.price }}<span class="text-sm font-normal"> USD/月 起</span></p>
                            <div class="relative mb-2 px-1 text-center">
                                <small class="text-muted relative"> 
                                    台幣約
                                    {{ item.price.replace(',','')*32 }}
                                    TWD/月
                                </small>
                            </div>
                            <a class="bg-orange hover:bg-orangeDark text-white text-l font-bold rounded py-2 px-14 w-4/5 inline-flex items-center justify-center"
                                href="https://tw.cocloud.com/zh-tw/contact_us/">立即申請</a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="lg:hidden px-6 pb-6 overflow-x-hidden">
                <sliderBlock :slides="slides"></sliderBlock>
            </div>
        </div>

    </div>
</template>
<script setup>
import sliderBlock from './_sliderBlock.vue';
import { reactive } from 'vue';
import aws from '../assets/images/icon-1.webp'
import goggle from '../assets/images/icon-2.webp'
import azure from '../assets/images/icon-3.webp'
import cloudflare from '../assets/images/icon-7.webp'
import huawei from '../assets/images/icon-6.webp'
import tencent from '../assets/images/icon-5.webp'
import alibabacloud from '../assets/images/icon-4.webp'
import check from '../assets/images/icon-check.webp'

const plans = reactive([{
    img: aws,
    title: '亞馬遜雲',
    sub: 'AWS Shield Advanced',
    features: [
        '<p class="mb-3 flex"><img class="shrink-0 inline-block w-6 h-6 object-fit mr-2" src="'+ check +'"/>為更大型、複雜的攻擊提供額外防護</p>', 
        '<p class="mb-3 flex"><img class="shrink-0 inline-block w-6 h-6 object-fit mr-2" src="'+ check +'"/>享有 DDoS 擴展費用保護</p>', 
        '<p class="mb-3 flex"><img class="shrink-0 inline-block w-6 h-6 object-fit mr-2" src="'+ check +'"/>全天候提供 DDoS 專家支援</p>'],
    price: '2,850',
    originPrice: '3,000',
    discount: ''
}, {
    img: goggle,
    title: 'GCP',
    sub: 'Google Cloud Armor Managed<br>Protection PLUS',
    features: [
        '<p class="mb-3 flex"><img class="inline-block w-6 h-6 object-fit mr-2" src="'+ check +'"/>包含保護 100 項資源</p>', 
        '<p class="mb-3 flex"><img class="inline-block w-6 h-6 object-fit mr-2" src="'+ check +'"/>自動調節式保護</p>'],
    price: '2,850',
    originPrice: '3,000',
    discount: ''
}, {
    img: azure,
    title: 'Azure',
    sub: 'Azure DDoS',
    features: [
        '<p class="mb-3 flex"><img class="inline-block w-6 h-6 object-fit mr-2" src="'+ check +'"/>包含保護 100 項資源</p>', 
        '<p class="mb-3 flex"><img class="inline-block w-6 h-6 object-fit mr-2" src="'+ check +'"/>Always On 流量監視</p>'],
    price: '2,796.8',
    originPrice: '2,944',
    discount: ''
}, {
    img: cloudflare,
    title: 'CLOUDFLARE',
    sub: 'CLOUDFLARE 方案',
    features: ['<p class="mb-3 flex"><img class="inline-block w-6 h-6 object-fit mr-2" src="'+ check +'"/>適用屬於業務核心的 CDN 加速與 DDoS 防禦方案</p>'],
    price: '5,000',
    originPrice: '5,268',
}, {
    img: huawei,
    title: '華為雲',
    sub: 'DDoS 高防 AAD（國際版）',
    features: [
        '<p class="flex justify-between mb-1"><span>流量清洗頻寬</span><span>10-500 Mbps</span></p>', 
        '<p class="flex justify-between mb-1"><span>彈性防護帶寬</span><span>50G 無限高防</span></p>', 
        '<p class="flex justify-between mb-1"><span>IP 個數</span><span>最高可達 256IP</span></p>'],
    price: '1,443.12',
    originPrice: '1,519',
    discount: '95'
}, {
    img: tencent,
    title: '騰訊雲',
    sub: '適合金融、遊戲、政府等防護<br>（境外基本方案）',
    features: [
        '<p class="flex justify-between mb-1"><span>DDoS 防護能力</span><span>20Gbps</span></p>', 
        '<p class="flex justify-between mb-1"><span>CC 防護峰值</span><span>40,000QPS</span></p>'
    ],
    price: '4,560',
    originPrice: '4,800',
    discount: '95'
}])
const slides = [{
    img: alibabacloud,
    title: '阿里雲',
    sub: 'Anti-DDoS Origin<br>防護多個 IP 位址或網段',
    features: ['<p class="flex justify-between mb-1"><span>流量清洗頻寬</span><span>10-500 Mbps</span></p>'],
    price: '6,665.2',
    originPrice: '7,016',
    discount: '95'
}, {
    img: alibabacloud,
    title: '阿里雲',
    sub: 'Anti-DDoS Premium<br>通用業務防護方案',
    features: ['<p class="flex justify-between mb-1"><span>流量清洗頻寬</span><span>100 Mbps</span></p>'],
    price: '2,498.5',
    originPrice: '2,630',
    discount: '95'
}, {
    img: alibabacloud,
    title: '阿里雲',
    sub: 'GameShield App<br>防護專案',
    features: [
        '<p class="flex justify-between mb-1"><span>流量清洗頻寬</span><span>100 Mbps</span></p>', 
        '<p class="flex justify-between mb-1"><span>DAU</span><span>80,000</span></p>'
    ],
    price: '1,949.689',
    originPrice: '12,578.62',
    discount: '95'
}]
</script>
<style>
.product-box {
    width: 400px;
    height: 424px;
}
.product-box-lg {
    width: 400px;
    height: 462px;
}
@media screen and (max-width: 768px) {
    .product-box, .product-box-lg {
        width: 328px;
        height: 408px;
    }
}
</style>